<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7.css">
    <script src="../js/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <label>
                ID:
                <input type="text" v-model="id">
            </label>
            <label>
                name:
                <input type="text" v-model="name" @keyup.13="na">
            </label>
            <label>
                搜索关键字:
                <input type="text" v-model="keywords" v-focus v-color="'blue'">
            </label>
            <input type="button" value="添加" @click="na">
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>

                </tr>
            </thead>

            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | datasert()}}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>

            </tbody>
        </table>

    </div>
    <div id="app2">
        <h2 v-fontweight="'900'" v-color="'pink'" v-fontsize="'50px'">{{ dt | guliqi}}</h2>
    </div>
</body>
<script>
    Vue.directive('focus', {
        inserted:(el) => {
            el.focus()
        }
    })
    Vue.directive('color', {
        bind:(el, disblue) => {
            // el.style.color = 'red'
            el.style.color = disblue.value
        }
    })
    Vue.filter('datasert', (dateStr, dateRer = "") => {
        var dt = new Date(dateStr)
        var y = dt.getFullYear()


        var m = (dt.getMonth() + 1).toString().padStart(2, '0')
        var d = dt.getDate().toString().padStart(2, '0')

        // return `${y}-${m}-${d}` 
        if (dateRer.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`
        } else {
            var hh = dt.getHours()
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        }
    })

    var vue = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: [{
                    id: 1,
                    name: '奔驰',
                    ctime: new Date()
                },
                {
                    id: 2,
                    name: '宝马',
                    ctime: new Date()
                }
            ]
        },
        methods: {
            na() {
                var cas = {
                    id: this.id,
                    name: this.name,
                    ctime: new Date()
                }
                this.list.push(cas)
                this.id = this.name = ""
            },
            del(id) {
                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                })
                this.list.splice(index, 1)
            },
            search(keywords) {
                var listNew = []
                this.list.forEach(item => {
                    if (item.name.indexOf(keywords) != -1) {
                        listNew.push(item)
                    }
                })
                return listNew
            }
        },

    })
    var vm = new Vue({
        el: '#app2',
        data: {
            dt: new Date()
        },
        filters: {
            guliqi: (dateStr, pattern = '') => {
                var dt = new Date(dateStr)

                //   yyyy-mm-dd
                var y = dt.getFullYear()
                var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                var d = dt.getDate().toString().padStart(2, '0')

                if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                    return `${y}-${m}-${d}`
                } else {
                    var hh = dt.getHours()
                    var mm = dt.getMinutes().toString().padStart(2, '0')
                    var ss = dt.getSeconds().toString().padStart(2, '0')

                    return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
                }
            }
        },
        directives: {
            'fontweight': {
                bind: (el, fontweight) => {
                    el.style.fontWeight = fontweight.value
                }
            },
            'fontsize':(el,fontsize)=>{
                el.style.fontSize = fontsize.value
            }
        }
        
    })
</script>

</html>